import React, { useState, forwardRef, useImperativeHandle, useEffect, useMemo } from "react"
import {
    Button,
    Checkbox,
    Divider,
    Drawer,
    Empty,
    Form,
    Icon,
    ImgDefault,
    Input,
    InputNumber,
    message,
    Modal,
    Popover,
    Progress,
    Radio,
    Select,
    Space,
    Spin,
    Steps,
    Switch,
    Tooltip
} from "@bytedance/mona-ui"
import db from "@tools/indexDB";
const { Option } = Select;
const { TextArea } = Input;

function TitleSetBox(props: any, ref: any) {
    const infoConfigData = {
        setTypeStatus: 1,
        radioState: '1',
        configType1: {
            qianzui: '',
            houzui: '',
            selectTupe: [],
            selectTupe1: {
                fanxiang: '1' // 1前面 2后面
            },
            selectTupe2: {
                biaotifanx: '1', // 1前面 2后面
                shangchuan: '1', // 1前面 2后面
            }
        },
        configType1Status: false,
        configType2: {
            splitList: [{
                yuanci: '',
                zihuan: ''
            }],
            selectTupe: false,
            selectTupe2: {
                biaotifanx: '1', // 1前面 2后面
                shangchuan: '1', // 1前面 2后面
            }
        },
        configType2Status: false,
        configType3: '',
        configType3Status: false,
        configType4: '',
        configType4Status: false,
        configType5: [],
        configType5Status: false,
        configType6: {
            qianzui: '',
            houzui: '',
        },
        configType6Status: false,
        configType7: {
            qianDel: '0',
            houDel: '0'
        },
        configType7Status: false,
    }
    const [setConfigObj, setSetConfigObj] = useState<any>(null)
    useImperativeHandle(ref, () => ({
        setConfigObj,
    }))
    useMemo(() => {
        // const getInfoDtat = localStorage.getItem('dly-setConfigObj-title')
        // try {
        //     const toJson = JSON.parse(getInfoDtat)
        //     if (toJson) {
        //         setSetConfigObj(toJson)
        //     } else {
        //         setSetConfigObj(infoConfigData)
        //     }
        // } catch (error) {
        //     setSetConfigObj(infoConfigData)
        // }
        db.copyProductConfig.where('funcname').equals('dly-setConfigObj-title').toArray().then((res) => {
            if (res[0] && res[0].data) {
                setSetConfigObj(res[0].data)
            } else {
                setSetConfigObj(infoConfigData)
            }
        }).catch(err => {
            setSetConfigObj(infoConfigData)
        })
    }, [props])
    useEffect(() => {
        if (setConfigObj) {
            db.copyProductConfig.put({
                funcname: 'dly-setConfigObj-title',
                data: setConfigObj
            })
        }

    }, [setConfigObj])
    function Func1() {
        return <Space direction="vertical">
            <Space>
                {/* <span>增加前缀内容:</span> */}
                <Input size="small" defaultValue={setConfigObj.configType1.qianzui}
                    // onClick={(e) => {
                    //     e.stopPropagation()
                    // }}
                    onFocus={(e) => {
                        e.stopPropagation()
                    }}
                    onBlur={(e: any) => {
                        if (setConfigObj.configType1.qianzui !== e.target.value) {
                            setConfigObj.configType1.qianzui = e.target.value
                            setSetConfigObj({ ...setConfigObj })
                        }
                    }}
                    style={{ width: 200 }}
                    placeholder="请输入前缀"
                ></Input>
                <span>增加后缀:</span>
                <Input size="small" defaultValue={setConfigObj.configType1.houzui} onFocus={(e) => {
                    e.stopPropagation()
                }} onBlur={(e: any) => {
                    if (setConfigObj.configType1.houzui !== e.target.value) {
                        setConfigObj.configType1.houzui = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }

                }} style={{ width: 200 }} placeholder="请输入后缀"></Input>
            </Space>
            <Space>
                <Checkbox defaultChecked={setConfigObj.configType1.selectTupe.includes('1')} value='1' onChange={(e) => {
                    if (e.target.checked) {
                        setConfigObj.configType1.selectTupe.push(e.target.value)
                        setSetConfigObj({ ...setConfigObj })
                        // setSetConfigObj([...checkList, e.target.value])
                    } else {
                        setConfigObj.configType1.selectTupe = setConfigObj.configType1.selectTupe.filter((item) => item !== e.target.value)
                        setSetConfigObj({ ...setConfigObj })
                        // setCheckList(checkList.filter((item) => item !== e.target.value))
                    }
                }} />
                <Space>
                    <span>若商品有货号，将货号添加到标题</span>
                    <Select defaultValue={setConfigObj.configType1.selectTupe1.fanxiang} onClick={(e) => {
                        // 阻止冒泡
                        e.stopPropagation()
                    }} size="small" onChange={(e: any) => {
                        // e.stopPropagation()
                        setConfigObj.configType1.selectTupe1.fanxiang = e
                        setSetConfigObj({ ...setConfigObj })
                    }} style={{ width: 80 }}>
                        <Option value="1">前缀</Option>
                        <Option value="2">后缀</Option>
                    </Select>
                </Space>

            </Space>
            <Space>
                <Checkbox defaultChecked={setConfigObj.configType1.selectTupe.includes('2')} value='2' onChange={(e) => {
                    if (e.target.checked) {
                        setConfigObj.configType1.selectTupe.push(e.target.value)
                        setSetConfigObj({ ...setConfigObj })
                        // setSetConfigObj([...checkList, e.target.value])
                    } else {
                        setConfigObj.configType1.selectTupe = setConfigObj.configType1.selectTupe.filter((item) => item !== e.target.value)
                        setSetConfigObj({ ...setConfigObj })
                        // setCheckList(checkList.filter((item) => item !== e.target.value))
                    }
                }} />
                <Space>
                    <span>如果修改后的标题超过类目字符限制(中文算2个字)，自动从</span>
                    <Select defaultValue={setConfigObj.configType1.selectTupe2.biaotifanx} onClick={(e) => {
                        // 阻止冒泡
                        e.stopPropagation()
                    }} size="small" onChange={(e: any) => {
                        // e.stopPropagation()
                        setConfigObj.configType1.selectTupe2.biaotifanx = e
                        setSetConfigObj({ ...setConfigObj })
                    }} style={{ width: 100 }}>
                        <Option value="1">新标题</Option>
                        <Option value="2">原标题</Option>
                    </Select>
                    <span>的</span>
                    <Select defaultValue={setConfigObj.configType1.selectTupe2.shangchuan} onClick={(e) => {
                        // 阻止冒泡
                        e.stopPropagation()
                    }} size="small" onChange={(e: any) => {
                        // e.stopPropagation()
                        setConfigObj.configType1.selectTupe2.shangchuan = e
                        setSetConfigObj({ ...setConfigObj })
                    }} style={{ width: 80 }}>
                        <Option value="1">前面</Option>
                        <Option value="2">后面</Option>
                    </Select>
                    <span>删除相应字数 </span>
                </Space>
            </Space>
        </Space>

    }
    function Func2() {
        return <Space direction="vertical">
            {setConfigObj.configType2.splitList.map((item, index) => {
                return <Space key={index}>
                    {/* <span>商品关键字:</span> */}
                    <Input size="small" defaultValue={item.yuanci}

                        onBlur={(e: any) => {
                            if (item.yuanci !== e.target.value) {
                                item.yuanci = e.target.value
                                setSetConfigObj({ ...setConfigObj })
                            }
                        }}
                        style={{ width: 200 }}
                        placeholder="请输入前缀"
                    ></Input>
                    <span>替换为:</span>
                    <Input size="small" defaultValue={item.zihuan} onBlur={(e: any) => {
                        if (item.zihuan !== e.target.value) {
                            item.zihuan = e.target.value
                            setSetConfigObj({ ...setConfigObj })
                        }

                    }} style={{ width: 200 }} placeholder="请输入后缀"></Input>
                    {index === 0 && <Icon type="AddIcon" style={{
                        color: '#1966FF',
                        cursor: 'pointer'
                    }} onClick={(e) => {
                        setConfigObj.configType2.splitList.push({
                            yuanci: '',
                            zihuan: ''
                        })
                        setSetConfigObj({ ...setConfigObj })
                    }}></Icon>}
                    {index !== 0 && <Icon type="FlatIcon" style={{
                        color: '#1966FF',
                        cursor: 'pointer'
                    }} onClick={(e) => {
                        setConfigObj.configType2.splitList.splice(index, 1)
                        // setSetConfigObj({ ...setConfigObj })
                        setSetConfigObj({ ...setConfigObj })
                    }}></Icon>}

                </Space>
            })}


            <Space>
                <Checkbox defaultChecked={setConfigObj.configType2.selectTupe} value='2' onChange={(e) => {
                    setConfigObj.configType2.selectTupe = e.target.checked

                }} />
                <Space>
                    <span>如果修改后的标题超过类目字符限制(中文算2个字)，自动从</span>
                    <Select defaultValue={setConfigObj.configType2.selectTupe2.biaotifanx} onClick={(e) => {
                        // 阻止冒泡
                        e.stopPropagation()
                    }} size="small" onChange={(e: any) => {
                        // e.stopPropagation()
                        setConfigObj.configType2.selectTupe2.biaotifanx = e
                        setSetConfigObj({ ...setConfigObj })
                    }} style={{ width: 100 }}>
                        <Option value="1">新标题</Option>
                        <Option value="2">原标题</Option>
                    </Select>
                    <span>的</span>
                    <Select defaultValue={setConfigObj.configType2.selectTupe2.shangchuan} onClick={(e) => {
                        // 阻止冒泡
                        e.stopPropagation()
                    }} size="small" onChange={(e: any) => {
                        // e.stopPropagation()
                        setConfigObj.configType2.selectTupe2.shangchuan = e
                        setSetConfigObj({ ...setConfigObj })
                    }} style={{ width: 80 }}>
                        <Option value="1">前面</Option>
                        <Option value="2">后面</Option>
                    </Select>
                    <span>删除相应字数 </span>
                </Space>
            </Space>
        </Space>
    }
    function Func3() {
        return <Space align="start">
            {/* <span>使用新内容:</span> */}
            <TextArea placeholder="可输入多个标题，使用空格/回车/逗号隔开" defaultValue={setConfigObj.configType3} onBlur={(e) => {
                if (setConfigObj.configType3 !== e.target.value) {
                    setConfigObj.configType3 = e.target.value
                    setSetConfigObj({ ...setConfigObj })
                }
            }} style={{
                width: 500,
                height: 150
            }} />
        </Space>
    }
    function Func4() {
        return <Space align="start">
            {/* <span>删除关键字:</span> */}
            <TextArea placeholder="可输入多个标题，使用空格/回车/逗号隔开" defaultValue={setConfigObj.configType4} onBlur={(e) => {
                if (setConfigObj.configType4 !== e.target.value) {
                    setConfigObj.configType4 = e.target.value
                    setSetConfigObj({ ...setConfigObj })
                }
            }} style={{
                width: 500,
                height: 150
            }} />
        </Space>
    }
    function Func5() {
        const plainOptions = [
            { label: '去除英文', value: '1' },
            { label: '去除数字', value: '2' },
            { label: '去除空格', value: '3' },
            { label: '去除英文符号', value: '4' },
            { label: '去除货号', value: '5' },
            { label: '去除括号及内容', value: '6' },
            { label: '去除逗号', value: '7' },
        ]
        return <Space align="start">
            {/* <span>过滤内容:</span> */}
            <Checkbox.Group options={plainOptions} defaultValue={setConfigObj.configType5} onChange={(e) => {
                setConfigObj.configType5 = e
                setSetConfigObj({ ...setConfigObj })
            }} />
        </Space>
    }
    function Func6() {
        return <Space direction="vertical">
            <Space>
                {/* <span>替换前缀内容:</span> */}
                <Input size="small" defaultValue={setConfigObj.configType6.qianzui}
                    // onClick={(e) => {
                    //     e.stopPropagation()
                    // }}
                    onFocus={(e) => {
                        e.stopPropagation()
                    }}
                    onBlur={(e: any) => {
                        if (setConfigObj.configType6.qianzui !== e.target.value) {
                            setConfigObj.configType6.qianzui = e.target.value
                            setSetConfigObj({ ...setConfigObj })
                        }
                    }}
                    style={{ width: 200 }}
                    placeholder="请输入前缀"
                ></Input>
                <span>替换后缀内容:</span>
                <Input size="small" defaultValue={setConfigObj.configType6.houzui} onFocus={(e) => {
                    e.stopPropagation()
                }} onBlur={(e: any) => {
                    if (setConfigObj.configType6.houzui !== e.target.value) {
                        setConfigObj.configType6.houzui = e.target.value
                        setSetConfigObj({ ...setConfigObj })
                    }

                }} style={{ width: 200 }} placeholder="请输入后缀"></Input>
                <span style={{
                    color: 'red',
                    fontSize: 12
                }}>(将替换相应的字数，无需替换则为空)</span>
            </Space>
        </Space>
    }
    function Func7() {
        return <Space>
            {/* <span>删除首部字数:</span> */}
            <Select defaultValue={setConfigObj.configType7.qianDel} size="small" onChange={(e: any) => {
                // e.stopPropagation()
                setConfigObj.configType7.qianDel = e
                setSetConfigObj({ ...setConfigObj })
            }} style={{ width: 100 }}>
                <Option value="0">0 不删除</Option>
                <Option value="1">1</Option>
                <Option value="2">2</Option>
                <Option value="3">3</Option>
                <Option value="4">4</Option>
                <Option value="5">5</Option>
                <Option value="6">6</Option>
                <Option value="7">7</Option>
                <Option value="8">8</Option>
                <Option value="9">9</Option>
                <Option value="10">10</Option>

            </Select>
            <span>删除尾部字数: </span>
            <Select defaultValue={setConfigObj.configType7.houDel} size="small" onChange={(e: any) => {
                // e.stopPropagation()
                setConfigObj.configType7.houDel = e
                setSetConfigObj({ ...setConfigObj })
            }} style={{ width: 100 }}>
                <Option value="0">0 不删除</Option>
                <Option value="1">1</Option>
                <Option value="2">2</Option>
                <Option value="3">3</Option>
                <Option value="4">4</Option>
                <Option value="5">5</Option>
                <Option value="6">6</Option>
                <Option value="7">7</Option>
                <Option value="8">8</Option>
                <Option value="9">9</Option>
                <Option value="10">10</Option>
            </Select>

        </Space>
    }
    if (!setConfigObj) return null
    return <Space direction="vertical">
        <h4>商品标题</h4>
        <Radio.Group value={setConfigObj.setTypeStatus} onChange={(e) => {
            setSetConfigObj({ ...setConfigObj, setTypeStatus: e.target.value })
        }}>
            <Radio value={1}>单独设置</Radio>
            <Space size={0}>
                <Radio value={2}>混合设置</Radio>
                <span style={{
                    fontSize: 12,
                    color: '#999'
                }}>(根据裂变数量随机使用选中并设置的项进行设置)</span>
            </Space>
        </Radio.Group>
        {setConfigObj.setTypeStatus === 1 && <Radio.Group value={setConfigObj.radioState} onChange={(e) => {
            setSetConfigObj({ ...setConfigObj, radioState: e.target.value })
        }}>
            <Space direction="vertical">
                <Space align="start" size={4}><Radio value={'1'} >增加前缀内容:</Radio> <Func1 /></Space>
                <Space align="start" size={4}><Radio value={'2'} >商品关键字:</Radio> <Func2 /></Space>
                <Space align="start" size={4}><Radio value={'3'} >使用新内容:</Radio> <Func3 /></Space>
                <Space align="start" size={4}><Radio value={'4'} >删除关键字:</Radio> <Func4 /></Space>
                <Space align="center" size={4}><Radio value={'5'} >过滤内容:</Radio> <Func5 /></Space>
                <Space align="center" size={4}><Radio value={'6'} >替换前缀内容:</Radio> <Func6 /></Space>
                <Space align="center" size={4}><Radio value={'7'} >删除首部字数:</Radio> <Func7 /></Space>
            </Space>
        </Radio.Group>}
        {setConfigObj.setTypeStatus === 2 && <Space direction="vertical" align="start">
            <Space align="start">
                <Checkbox checked={setConfigObj.configType1Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType1Status: e.target.checked })
                }}>增加前缀内容:</Checkbox> <Func1 />
            </Space>
            <Space align="start">
                <Checkbox checked={setConfigObj.configType2Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType2Status: e.target.checked })
                }} >商品关键字:</Checkbox> <Func2 />
            </Space>
            <Space align="start">
                <Checkbox checked={setConfigObj.configType3Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType3Status: e.target.checked })
                }} >使用新内容:</Checkbox> <Func3 />
            </Space>
            <Space align="start">
                <Checkbox checked={setConfigObj.configType4Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType4Status: e.target.checked })
                }}  >删除关键字:</Checkbox> <Func4 /></Space>
            <Space align="center">
                <Checkbox checked={setConfigObj.configType5Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType5Status: e.target.checked })
                }}  >过滤内容:</Checkbox> <Func5 /></Space>
            <Space align="center">
                <Checkbox checked={setConfigObj.configType6Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType6Status: e.target.checked })
                }}  >替换前缀内容:</Checkbox> <Func6 /></Space>
            <Space align="center">
                <Checkbox checked={setConfigObj.configType7Status} onChange={(e) => {
                    setSetConfigObj({ ...setConfigObj, configType7Status: e.target.checked })
                }}  >删除首部字数:</Checkbox> <Func7 /></Space>
        </Space>
        }
        {/* <Button onClick={() => {
            console.log('setConfigObj', setConfigObj)
        }}>13456</Button> */}
    </Space>
}
export default forwardRef(TitleSetBox)